<template>
	<view>
		<!-- <view class="walletBox flexbc">
			<view style="text-align: center;">
				<text style="font-size:40rpx;">{{ Math.abs(RewardCount.RewardTotalMoney) }}</text><br><br>
				<text style="font-size:24rpx;margin-top:20rpx;">已累积收益</text>
			</view>
			<view style="text-align: center;">
				<text style="font-size:40rpx;">{{ Math.abs(RewardCount.RewardMoney) }}</text><br>
				<button class="rechargeBtn" @click="onExchangeMoney">可兑换</button>
			</view>
			<view style="text-align: center;">
				<text style="font-size:40rpx;">{{ RewardCount.CashMoney }}</text><br>
				<button class="rechargeBtn" @click="rechargeHandle">可提现</button>
			</view>
		</view> -->
		<view class="walletBox">

			<view
				style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-left: 18rpx;">
				<view style="text-align: center;">
					<text style="font-size:40rpx;">{{ Math.abs(RewardCount.RewardMoney) }}</text><br>
					<text style="font-size:24rpx">打赏收益</text><br>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<button class="rechargeBtn" style="width: 152rpx;" @click="onExchangeMoney">兑换现金</button>
				</view>
				<view style="text-align: center;">
					<text style="font-size:40rpx;">{{ RewardCount.CashMoney.toFixed(2) }}</text><br>
					<text style="font-size:24rpx">可提现</text>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<button class="rechargeBtn" style="	width: 130rpx;" @click="rechargeHandle">去提现</button>
				</view>
			</view>
			<view style="font-size:24rpx;text-align: left;margin-top: 20rpx;">累计收益<text
					style="margin-left: 10rpx;">{{ Math.abs(RewardCount.RewardTotalMoney) }}</text></view>
		</view>






		<view style="border-bottom:1rpx solid #f0f0f0;">
			<fui-tabs :tabs="pageTabs" :current="currentIndex" isSlider selectedColor="#000" sliderBackground="#FFDD00"
				@change="changePages"></fui-tabs>
		</view>

		<view style="padding:30rpx;" v-if="currentIndex === 0">
			<view v-if="RewardList.length === 0">
				<fui-empty src="../../static/component/empty/img_news_3x.png" title="暂无信息"></fui-empty>
			</view>
			<view v-else style="padding:10rpx;">
				<view v-for="(item,index) in RewardList" :key="index" class="RewardList flexbc">
					<view class="artHeadPic" @click="gotoArtiter(item.RewardUserID)">
						<view style="position:absolute;z-index:50;right:-5rpx;top:-10rpx" v-if="item.isAuthOk == 2">
							<image :src="baseUrl + 'icon/authed.png'" style="width:25rpx;height:25rpx;"></image>
						</view>
						<image :src="item.WxHeadPic"></image>
					</view>
					<view style="float:left">
						<view style="font-size: 28rpx;">
							<text>{{ item.NickName }} </text>
							<text style="color:#CCC;margin-left: 8rpx;">打赏了我</text>
						</view>
						<view style="color:#d6d6d6;font-size: 24rpx;margin-top: 8rpx;">{{ item.addTime }}</view>
						<!-- <view style="width:50rpx">{{ item.RewardUserID }}</view> -->
					</view>
					<view style="width:80rpx;height:80rpx;float:left;">
						<image :src="item.RewardGiftPNG" mode="widthFix" style="width:80rpx;"></image>
					</view>
					<view style="width:120rpx;font-size:30rpx;color:green;text-align:right">
						+{{ Math.round(item.RewardGiftPrice) }}</view>
				</view>
			</view>
		</view>

		<view style="padding:30rpx;" v-if="currentIndex === 1">
			<view v-if="ExchangeList.length === 0">
				<fui-empty src="../../static/component/empty/img_news_3x.png" title="暂无信息"></fui-empty>
			</view>
			<view v-else>
				<view v-for="(item,index) in ExchangeList" :key="index" class="RewardList flexbc">
					<view>
						<view style="font-size: 28rpx;"> {{item.ExchangeType == 1? '兑换': '提现' }} </view>
						<view style="color: #d6d6d6;font-size: 24rpx;margin-top: 10rpx;"> {{ item.addTime }} </view>
					</view>
					<view style="font-size:30rpx;font-weight:bold">+{{ item.ExchangePrice }}</view>
				</view>
			</view>
		</view>

		<view style="padding:30rpx;" v-if="currentIndex === 2">
			<view v-if="CommissionList.length === 0">
				<fui-empty src="../../static/component/empty/img_news_3x.png" title="暂无信息"></fui-empty>
			</view>
			<view v-else>
				<view v-for="(item,index) in CommissionList" :key="index" class="RewardList flexbc">
					<view>
						<view style="font-size: 28rpx;"> {{item.ExchangeType == 1? '兑换': '提现' }} </view>
						<view style="color: #d6d6d6;font-size: 24rpx;margin-top: 10rpx;"> {{ item.addTime }} </view>
					</view>
					<view style="font-size:30rpx;font-weight:bold">{{ item.ExchangePrice }}</view>
					<view style="font-size:30rpx;color: #d6d6d6;" v-if="item.WithdrawState === 0">待审核</view>
					<view style="font-size:30rpx;color:seagreen;" v-else>提现成功</view>
				</view>
			</view>
		</view>

		<view style="padding:10rpx;" v-if="currentIndex === 3">
			<fui-table fixed :itemList="GiftList" :header="GiftHeader"></fui-table>
		</view>

		<fui-bottom-popup :show="moneyShow" @close="moneyShow = false">
			<view class="" style="padding: 20rpx;">
				<view class="" style="display: flex;flex-wrap: row;justify-content: space-between;align-items: center;">
					<text style="font-size: 36rpx;">金币兑换现金</text>
					<fui-icon name="clear-fill" size="50" color="#e1e1e1" @click="onClose"></fui-icon>
				</view>
				<view class="" style="font-size: 24rpx;color: #ccc;margin-top: 15rpx;">
					可兑换余额: {{ Math.abs(RewardCount.RewardMoney) }}
				</view>
				<view class=""
					style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;background-color: #f3f3f3;padding: 20rpx;border-radius: 10rpx;margin-top: 35rpx;">
					<view class="">
						<text>礼物值</text>
						<text
							style="font-size: 34rpx;font-weight: bold;margin-left: 20rpx;">{{ Math.abs(RewardCount.RewardMoney) }}</text>
					</view>
					<view class="" style="color: red;">
						<text style="font-size: 26rpx;">=</text>
						<text
							style="font-size: 36rpx;font-weight: bold;margin-left: 10rpx;">{{ RewardCount.ExchangePrice }}</text>
						<text style="font-size: 28rpx;margin-left: 10rpx;">元</text>
					</view>
				</view>
				<button class="submit-button" @click="onExchange">立即兑换</button>
			</view>
		</fui-bottom-popup>

		<uni-popup type="center" ref="redEnvelope">
			<view class="redEnvelope">
				<view style="color: #f7e7b3;margin-top: 180rpx;" v-if="!!isKai">
					<view style="display: flex;justify-content: center;align-items: center;">
						<image src="/static/icon/meimo.png" style="width: 50rpx;height:50rpx;border-radius: 10rpx;">
						</image>
						<view style="margin-left: 10rpx;font-size: 34rpx;">美模发来的红包！</view>
					</view>

					<view style="font-size: 86rpx;margin-top: 36rpx;text-align: center;">
						<text>188.88</text><text style="margin-left: 5rpx;font-size: 36rpx;">元</text>
					</view>
				</view>

				<view style="color: #f7e7b3;margin-top: 180rpx;font-size: 50rpx;text-align: center;" v-if="!isKai">
					恭喜发财，大吉大利！
				</view>

				<view class="redEnvelope-kai" v-if="!isKai" @click="onkaiRedEnvelope">
					<view class="kai-border">
						開
					</view>
				</view>

				<view class="redEnvelope-close" @click="$refs.redEnvelope.close()">
					<view style="margin-top: 6rpx;margin-left: 6rpx;">
						<uni-icons type="closeempty" size="24" color="#d9a647"></uni-icons>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isKai: false,
				// 打开兑换现金弹框
				moneyShow: false,
				RewardCount: {},
				pageTabs: [{
						name: '打赏收益',
						value: 1
					},
					{
						name: '兑换记录',
						value: 2
					},
					{
						name: '提现记录',
						value: 3
					},
					{
						name: '打赏规则',
						value: 3
					}
				],
				helpList: [],
				GiftHeader: [{
					type: 2,
					imgWidth: 120,
					imgHeight: 120,
					prop: 'RewardGiftPNG',
					label: '礼物'
				}, {
					prop: 'RewardGiftName',
					label: '名称'
				}, {
					prop: 'RewardGiftPrice',
					label: '所需金币'
				}],
				GiftList: [],
				RewardList: [],
				CommissionList: [],
				ExchangeList: [],
				currentIndex: 0,
				currentClass: -1,
				baseUrl: '',
			};
		},
		onShow() {
			this.baseUrl = this.$baseUrl;
			this.loadData();
		},
		methods: {
			onClose() {
				// console.log('执行~')
				this.moneyShow = false;
			},
			onkaiRedEnvelope() {
				this.isKai = true;
			},
			// 兑换
			onExchange() {
				this.$httpost('/UserCenter/ExchangeCharm', {}).then(res => {
					// console.log(res)
					if (res.code == 200) {
						uni.showToast({
							title: "兑换成功"
						})
						this.loadData();
						this.moneyShow = false;
					}

				})
			},
			onExchangeMoney() {
				if (this.RewardCount.RewardMoney == 0) {
					uni.showToast({
						title: '礼物值不足以兑换现金！',
						icon: 'none'
					})
					return false;
				}
				this.moneyShow = true;
			},
			gotoArtiter(artisterID) {
				uni.navigateTo({
					url: '/artistesPages/pages/artister?artisterID=' + artisterID
				})
			},
			loadData() {
				this.$httpost('/UserCenter/myReward', {}).then(res => {
					if (res.code == 200) {
						// console.log('接口返回数据：', res.data.RewardCount);
						this.RewardCount = res.data.RewardCount;
						this.RewardList = res.data.RewardList;
						this.CommissionList = res.data.CommissionList;
						this.ExchangeList = res.data.ExchangeList;
					}
				});

				this.$httpost('/RewardGifts/Gifts', {}).then(res => {
					// console.log('moka', res)
					if (res.code == 200) {
						this.GiftList = res.data;
						// console.log('GiftList', this.GiftList)
					}
				})

				// this.helpList()
			},
			// helpList() {
			// 	this.$httpost('/UserCenter/helpList', {
			// 		currentClass: 4
			// 	}).then(res => {
			// 		if (res.code == 200) {
			// 			this.helpList = res.data.HelpList;
			// 		}
			// 	});
			// },
			changePages(e) {
				// console.log(e)
				this.currentIndex = e.index;
				this.currentClass = e.value;
				// this.helpList();
			},
			rechargeHandle() {

				if (this.RewardCount.CashMoney == 0) {
					uni.showModal({
						title: '暂时不足以提现！',
						content: '请先积攒礼物值并兑换！',
						showCancel: false,
						success: res => {}
					})
					return false;
				}

				let timeStamp = new Date().getTime();

				// console.log(timeStamp);
				this.$common.goNavPage(`/myPages/pages/withdrawal`)

				wx.requestPayment({
					timeStamp: timeStamp,
					nonceStr: '',
					package: '',
					signType: 'MD5',
					paySign: '',
					success(res) {},
					fail(res) {}
				})
			}
		}
	}
</script>

<style lang="scss">
	.walletBox {
		width: 85vw;
		margin: auto;
		height: 130rpx;
		background-color: $globalColor;
		border-radius: 20rpx;
		padding: 40rpx;
	}

	.rechargeBtn {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #000;
		color: #FFF;
		border-radius: 10rpx;
		margin: 0rpx;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.RewardList {
		background: #FFF;
		// border-radius:10rpx;
		padding: 20rpx;
		// border-bottom:1rpx solid #f0f0f0;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		border-radius: 10rpx;
	}

	.artHeadPic {
		position: relative;
		float: left;
		width: 80rpx;
		height: 80rpx;
		background-color: #CCC;
		// background-image: url('https://hbimg.huabanimg.com/53392e6876c6a69c39da3a2a63c3a62ed4f9d26d23a781-4ckBVh_fw658');
		background-position: center;
		background-size: cover;
		border-radius: 80rpx;
	}

	.artHeadPic image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
	}

	.submit-button {
		background-color: #FFDD00;
		border-radius: 10rpx;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 30rpx;
		color: #fff;

		&::after {
			border: none;
		}
	}

	.redEnvelope {
		background-image: url(../../static/icon/redEnvelope.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 80vw;
		height: 60vh;
		border-radius: 20rpx;
		position: relative;
		display: flex;
		justify-content: center;

		&-kai {
			width: 150rpx;
			height: 150rpx;
			background-color: #d9ba80;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 100rpx;
			right: 0;
			left: 0;
			margin: auto;
			box-shadow: 0rpx 4rpx 11rpx 0rpx #565656;

			& .kai-border {
				width: 130rpx;
				height: 130rpx;
				border: 1rpx #d9a647 solid;
				border-radius: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 56rpx;
				font-weight: bold;
			}
		}

		&-close {
			border: 5rpx solid #d9a647;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50rpx;
			position: absolute;
			bottom: -120rpx;
			left: 0;
			right: 0;
			margin: auto;
			justify-content: center;
			align-items: center;
			position: absolute;
		}
	}
</style>